<script setup lang="ts">
import {
  NButton,
  NSpace,
  NDataTable,
  NInput,
  type DataTableColumns,
  NPagination,
  NForm,
  NFormItem,
  NModal,
  NSelect,
  useMessage,
  NDatePicker,
  NGrid,
  NEllipsis,
  NGi
} from 'naive-ui'
import { h, onMounted, reactive, ref } from 'vue'
import ApproveProcess from '@/components/Approve/approveProcess.vue'
import ApproveRecord from '@/components/Approve/approveRecord.vue'
import ApproveFlow from '@/components/Approve/approveFlow.vue'
import { sendRequest } from '@/utils/api'
import { useTagStore } from '@/stores/layout'
import type { HttpResponsePagination, HttpResponse } from '@/utils/http'
import type { InterpreterModel } from '@/api/interpreter'
import VDisOrEnd from '@/views/OA/Common/DisOrEnd.vue'
import { useRouter, useRoute } from 'vue-router'
import FixedAction from '@/components/FixedAction.vue'
import VBackImg from '@/assets/images/back.png'
import { RecordType } from '@/router/utils'
import dayjs from 'dayjs'
const tags = useTagStore().tags
const message = useMessage()
const router = useRouter()
const route = useRoute()

const detail = ref<any>({})
const renderUseTime = () => {
  if (detail.value && detail.value.startUsageTime) {
    return `${detail.value.startUsageTime.split(' ')[0]}至${
      detail.value.endUsageTime.split(' ')[0]
    }`
  }
  return ''
}
// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  tags.splice(index, 1)
  if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}
const columns: any[] = [
  {
    key: 'collectibleName',
    title: '藏品名称',
    align: 'center',
    render: (rowData: any, rowIndex: number) => {
      return rowIndex !== detail.value.digitalCollectiblesList.length - 1
        ? rowData.collectibleName
        : '用途及使用时间'
    }
  },
  {
    key: 'assessNumber',
    title: '藏品条码号',
    align: 'left',
    colSpan: (rowData: any, rowIndex: number) =>
      rowIndex === detail.value.digitalCollectiblesList.length - 1 ? 3 : 1,
    render: (rowData: any, rowIndex: number) =>
      rowIndex === detail.value.digitalCollectiblesList.length - 1
        ? [
            h(
              'div',
              {},
              {
                default: () =>
                  detail.value.startUsageTime
                    ? `${detail.value.startUsageTime.split(' ')[0]}至${
                        detail.value.endUsageTime.split(' ')[0]
                      }`
                    : ''
              }
            ),
            h(
              'div',
              {},
              {
                default: () => detail.value.purpose
              }
            )
          ]
        : rowData.assessNumber
  },
  { key: 'dataRequirements', title: '数据要求', align: 'center' },
  { key: 'remark', title: '备注', align: 'center' }
]

const getDetail = async (id: string) => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'digitalCollect',
    api: 'info',
    uri: {
      id
    }
  })
  if (error) throw error
  if (res.code !== 0) throw new Error(res.msg)
  detail.value = res.data
}
onMounted(() => {
  if (route.query.id) {
    getDetail(String(route.query.id))
  }
})
</script>

<template>
  <div class="container">
    <div
      class="topTitle"
      v-if="!RecordType.DigitalCollectRouteName"
    >
      数字藏品提用详情
    </div>
    <div class="content">
      <VDisOrEnd
        v-if="RecordType.DigitalCollectRouteName"
        :id="detail.workflowInfoVo?.fromId"
        :assigneeFlag="detail.workflowInfoVo?.assigneeFlag"
        :title="'数字资源申请详情'"
      ></VDisOrEnd>
      <div
        class="table_box"
        v-if="detail"
      >
        <!-- <NDataTable :columns="columns" :data="detail.digitalCollectiblesList" :pagination="false" style="width: 60%;" /> -->
        <div class="firstBox">
          <div class="title1">藏品名称</div>
          <div class="title2">藏品条号码</div>
          <div class="title3">数据要求</div>
          <div class="title4">备注</div>
        </div>
        <div
          class="valueBox"
          v-for="(item, index) in detail.digitalCollectiblesList"
          :key="index"
        >
          <div class="title1">{{ item.collectibleName }}</div>
          <div class="title2">{{ item.assessNumber }}</div>
          <div class="title3">{{ item.dataRequirements }}</div>
          <div class="title4">
            <NEllipsis style="font-size: 18px; flex: 1">
              {{ item.remark }}
              <template #tooltip>
                <div style="font-size: 18px; max-width: 500px">
                  {{ item.remark }}
                </div>
              </template>
            </NEllipsis>
          </div>
        </div>
        <div class="second_box">
          <div class="title1">用途及使用时间</div>
          <div class="value1">
            <div style="height: 40px; line-height: 40px">{{ renderUseTime() }}</div>
            <div style="height: 40px; line-height: 40px">{{ detail.purpose }}</div>
          </div>
        </div>
      </div>
      <!-- <div class="line"></div> -->
      <!-- <div class="info_box" v-if="detail">
                <NGrid x-gap="12" y-gap="24" :cols="3">
                    <NGi>
                        <span>申请人部门</span>: {{ detail.deptName }}
                    </NGi>
                    <NGi>
                        申请人: {{ detail.userName }}
                    </NGi>
                    <NGi>
                        申请时间: {{ detail.createTime }}
                    </NGi>
                    <NGi v-if="detail.startUsageTime && detail.endUsageTime">
                        使用时间: {{ `${detail.startUsageTime.split(" ")[0]}至${detail.endUsageTime.split(" ")[0]}` }}
                    </NGi>
                    <NGi>
                        用途: {{ detail.purpose }}
                    </NGi>
                </NGrid>
            </div> -->
      <div class="basin_info">
        <div style="display: flex; align-items: center">
          <div class="basin_five_left">
            <div class="box">
              <span>申请人部门：</span>
              <span>
                {{ detail.deptName }}
              </span>
            </div>
          </div>
          <div class="basin_five_left">
            <div class="box">
              <span>申请人：</span>
              <span>{{ detail.userName }}</span>
            </div>
          </div>
          <div class="basin_five_left">
            <div class="box">
              <span>用途：</span>
              <span>{{ detail.purpose }}</span>
            </div>
          </div>
        </div>
        <div style="display: flex; align-items: center">
          <div class="basin_five_left">
            <div class="box">
              <span>申请时间：</span>
              <span>
                {{ detail.createTime }}
              </span>
            </div>
          </div>
          <div class="basin_five_left">
            <div class="box">
              <span>使用时间：</span>
              <span>{{ renderUseTime() }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- v-if="detail.workflowInfoVo" -->
      <div class="title">审批信息</div>
      <div class="flow_box">
        <div class="approve">
          <div class="box">
            <span>审批状态</span>
            <span style="font-size: 20px">{{ detail.workflowInfoVo?.status }}</span>
          </div>
          <div class="box">
            <span>审批流程</span>
            <div style="color: #5fb17f; font-size: 20px; font-weight: 500">
              <div
                style="display: inline"
                v-for="(item, index) in detail.workflowInfoVo?.workflowList"
                :key="index"
              >
                <span :style="{ textDecoration: item.value ? 'underline' : 'none' }">
                  {{ item.key }}
                </span>
                <span v-if="index != detail.workflowInfoVo?.workflowList.length - 1">→</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="title">审批记录</div>
      <div class="record_box">
        <ApproveRecord
          :data="detail.workflowInfoVo ? detail.workflowInfoVo.approvalRecordsList || [] : []"
        />
      </div>
    </div>
  </div>
  <FixedAction>
    <NSpace justify="start">
      <NSpace justify="start">
        <NButton
          style="width: 78px; color: #5fb17f"
          ghost
          @click="goBack"
        >
          <template #icon>
            <img
              :src="VBackImg"
              style="width: 25rem; height: 25rem"
            />
          </template>
          返回
        </NButton>
      </NSpace>
    </NSpace>
  </FixedAction>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #ebeceb;

  .topTitle {
    color: #1d2129;
    font-size: 24px;
    font-weight: 600;
    line-height: 34px; /* 141.667% */
    margin-bottom: 20rem;
    padding: 15rem 20rem;
    width: 100%;
  }

  .title {
    font-size: 22px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #5fb17f;
    margin-bottom: 10rem;
  }

  @mixin flexCom {
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-all;
    text-align: center;
  }

  .content {
    width: 100%;
    height: calc(100% - 240rem);
    box-sizing: content-box;
    padding: 18rem 33rem 120rem;
    overflow-y: scroll;

    .table_box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 15%;
      border-bottom: 1px dashed #bc9e70;
      padding-bottom: 20px;
      margin-bottom: 20px;

      .firstBox {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 50px;
        line-height: 50px;
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        font-size: 22px;
        letter-spacing: 5px;
        font-weight: bolder !important;
        background-color: #ffffff;

        .title1 {
          flex: 0 0 25%;
          border-right: 1px solid black;
          // text-align: center;
          @include flexCom;
        }

        .title2 {
          flex: 0 0 25%;
          border-right: 1px solid black;
          @include flexCom;
        }

        .title3 {
          flex: 0 0 25%;
          border-right: 1px solid black;
          @include flexCom;
        }

        .title4 {
          flex: 1;
          border-right: 1px solid black;
          @include flexCom;
        }
      }

      .valueBox {
        width: 100%;
        display: flex;
        min-height: 50px;
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        font-size: 18px;
        letter-spacing: 5px;
        background-color: #ffffff;

        .title1 {
          flex: 0 0 25%;
          border-right: 1px solid black;
          @include flexCom;
        }

        .title2 {
          width: 100%;
          flex: 0 0 25%;
          border-right: 1px solid black;
          @include flexCom;
        }

        .title3 {
          flex: 0 0 25%;
          border-right: 1px solid black;
          @include flexCom;
        }

        .title4 {
          width: auto;
          // height: 100%;
          // flex: 0 0 25%;
          border-right: 1px solid black;
          flex: 1;
          @include flexCom;
          overflow: hidden;
        }
      }

      .second_box {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 80px;
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        font-size: 20px;
        letter-spacing: 5px;
        background-color: #ffffff;

        .title1 {
          flex: 0 0 25%;
          height: 80px;
          line-height: 80px;
          border-right: 1px solid black;
          text-align: center;
        }

        .value1 {
          flex: 0 0 75%;
          height: 80px;
          line-height: 80px;
          border-right: 1px solid black;
          text-align: left;
          padding: 0 3%;
          font-size: 18px;
        }
      }
    }

    .line {
      width: 80%;
      margin-left: 10% !important;
      height: 1px;
      background-color: #cbcbcb;
      margin: 40px 0;
    }

    .info_box {
      padding: 0 10%;
      box-sizing: content-box;
      display: flex;
      justify-content: center;
      align-items: center;

      .title {
        color: #333;
        display: inline-block;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-weight: 700;
        width: 120px;
      }
    }

    .basin_info {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: auto;
      border-bottom: 1px dashed #bc9e70;
      margin-bottom: 20px;

      .basin_five_left {
        flex: 0 0 33%;
      }

      .box1 {
        display: flex;
        justify-content: flex-start;
        width: 200px;
        margin-bottom: 20px;

        span {
          width: 100px;
        }
      }

      .box {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        font-size: 16px;

        span:first-child {
          display: inline-block;
          width: 120px;
          font-weight: bold;
          color: #333333;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        }

        span:last-child {
          display: inline-block;
          flex: 1;
          color: #55524f;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        }
      }

      .basin-left {
        .box1 {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          font-size: 16px;

          span:first-child {
            display: inline-block;
            width: 120px;
            font-weight: bold;
            color: #333333;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          }

          span:last-child {
            display: inline-block;
            flex: 1;
            color: #55524f;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          }
        }
      }
    }

    .approve {
      display: flex;
      width: 100%;
      margin-bottom: 20px;
      border-bottom: 1px dashed #bc9e70;

      .box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 50px;
        width: auto;
        height: 90px;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        padding: 12px;
        margin-right: 10px;
        margin-bottom: 20px;

        span:first-child {
          font-size: 16px;
        }

        span:last-child {
          font-weight: 500;
          color: #5fb17f;
        }
      }
    }

    .record_box {
      width: 80%;
      background-color: #e1e1e1;
      margin-top: 20px;
    }

    .flow_box {
      margin-top: 20px;
    }
  }
}
</style>
